<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main.css" />
    <script src="/script/jquery.js" type="text/javascript"></script>
    <script src="/script/listit.js" type="text/javascript"></script>
    <script type="text/javascript">
         $(document).ready(function() {
            var results = new Results();
            results.init();
         });
    </script>
  </head>
  <body>
      <div class="main">
        <div class="login">
            <a href="{{ url }}">{{ url_linktext }}</a>
        </div>
        <div class="results">

            {% for todo in todos %}

                
                    <div class="result">
                        <input type="hidden" name="key" id="key" value="{{ todo.key }}"/>
                        <input type="hidden" name="title" id="title" value="{{ todo.title }}"/>                    
                        <div class="resultTitle">{{ todo.title }}<em><a href="/todo/delete?key={{ todo.key|escape }}">delete</a></em>
                            <a href="#" class="showDetails">+</a>
                        </div>
                        <div class="resultDetails">
                            <div class="resultLeft">
                               <div>
                                    top
                               </div>
                               <div>
                                    mid
                               </div>
                               <div>
                                    bot
                               </div>
                            </div>
                            <div class="resultRight">
                                <div>
                                    note:
                               </div>
                               <div>
                                    <textarea name="note" id="note">{{ todo.note|escape }}</textarea>
                                    <a href="#" class="editDetails">edit</a>
                               </div>
                            </div>
         
                        </div>                
                    </div>
                
     
            {% endfor %}    

        </div>    
        <div class="add">
        
            <p>Add a new one:</P>
            <form action="/todo/put" class="addForm" method="post">
                <fieldset>
                    <legend>To Dos:</legend>
                    <ol>
                       <li>
                          <label for="title">title:</label>
                          <input name="title" type="text" cols="60" />
                        </li>                 
                        <li>
                          <label for="title">note:</label>
                          <textarea name="note" rows="3" cols="60"></textarea>
                        </li>                
                        <li>
                          <input type="submit" value="Add To Do">
                        </li>                
                    </ol>
                </fieldset>
            </form>    
        
        </div>
      </div>
  
  </body>
</html>
